<template>
  <q-page class="index-page">
    <div class="banner-section">
      <div class="banner-content">
        <h1 class="banner-title">大学择校系统</h1>
        <p class="banner-subtitle">用数据驱动您的升学决策</p>
        <q-btn 
          color="primary" 
          label="开始择校" 
          to="/college-finder"
          class="start-button"
          size="lg"
        />
      </div>
    </div>

    <div class="content-container q-pa-md">
      <div class="rankings-preview q-mb-xl">
        <div class="row items-center q-mb-lg">
          <div class="col">
            <div class="text-h6">热门大学排名</div>
          </div>
          <div class="col-auto">
            <q-btn flat color="primary" label="查看完整排名" to="/college-finder" />
          </div>
        </div>
        
        <q-card>
          <q-card-section class="q-pa-0">
            <q-markup-table separator="cell" flat>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>学校名称</th>
                  <th>所在地</th>
                  <th>总分</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(university, index) in topUniversities" :key="university.id">
                  <td data-label="排名">
                    <span :class="index < 3 ? 'top-rank' : ''">{{ index + 1 }}</span>
                  </td>
                  <td data-label="学校名称">{{ university.name }}</td>
                  <td data-label="所在地">{{ university.location }}</td>
                  <td data-label="总分">{{ university.score }}</td>
                </tr>
              </tbody>
            </q-markup-table>
          </q-card-section>
        </q-card>
      </div>

      <div class="features-section q-mb-xl">
        <div class="row text-center q-col-gutter-md">
          <div class="col-12 col-md-4">
            <q-card class="feature-card">
              <q-card-section>
                <q-icon name="school" size="3rem" color="primary" />
                <div class="text-h6 q-mt-md">全面的大学信息</div>
                <p class="q-mt-sm">收录全国各大高校详细信息，包括专业设置、录取分数线等</p>
              </q-card-section>
            </q-card>
          </div>
          
          <div class="col-12 col-md-4">
            <q-card class="feature-card">
              <q-card-section>
                <q-icon name="search" size="3rem" color="primary" />
                <div class="text-h6 q-mt-md">智能匹配系统</div>
                <p class="q-mt-sm">根据您的分数和兴趣，智能推荐适合的大学和专业</p>
              </q-card-section>
            </q-card>
          </div>
          
          <div class="col-12 col-md-4">
            <q-card class="feature-card">
              <q-card-section>
                <q-icon name="bar_chart" size="3rem" color="primary" />
                <div class="text-h6 q-mt-md">数据分析</div>
                <p class="q-mt-sm">提供历年录取数据和趋势分析，辅助决策</p>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>

      <div class="stats-section q-mb-xl">
        <q-card>
          <q-card-section>
            <div class="text-center text-h6">平台数据统计</div>
            <div class="row q-col-gutter-md text-center q-mt-lg">
              <div class="col-12 col-md-3">
                <div class="stat-item">
                  <div class="text-h3 text-primary">{{ stats.colleges }}</div>
                  <div class="text-subtitle1">合作大学</div>
                </div>
              </div>
              
              <div class="col-12 col-md-3">
                <div class="stat-item">
                  <div class="text-h3 text-primary">{{ stats.majors }}</div>
                  <div class="text-subtitle1">专业类别</div>
                </div>
              </div>
              
              <div class="col-12 col-md-3">
                <div class="stat-item">
                  <div class="text-h3 text-primary">{{ stats.students }}</div>
                  <div class="text-subtitle1">服务学生</div>
                </div>
              </div>
              
              <div class="col-12 col-md-3">
                <div class="stat-item">
                  <div class="text-h3 text-primary">{{ stats.success }}</div>
                  <div class="text-subtitle1">录取成功率</div>
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'

const stats = ref({
  colleges: 864,
  majors: 128,
  students: '10万+',
  success: '98%'
})

const topUniversities = ref([
  { id: 1, name: '清华大学', location: '北京', score: 98.0 },
  { id: 2, name: '北京大学', location: '北京', score: 97.5 },
  { id: 3, name: '复旦大学', location: '上海', score: 95.2 },
  { id: 4, name: '上海交通大学', location: '上海', score: 94.8 },
  { id: 5, name: '浙江大学', location: '杭州', score: 94.1 },
  { id: 6, name: '中国科学技术大学', location: '合肥', score: 93.6 },
  { id: 7, name: '南京大学', location: '南京', score: 92.9 },
  { id: 8, name: '华中科技大学', location: '武汉', score: 91.5 }
])
</script>

<style lang="scss" scoped>
.index-page {
  .banner-section {
    background: linear-gradient(120deg, #1976D2 0%, #42A5F5 100%);
    color: white;
    padding: 100px 20px;
    text-align: center;
    
    .banner-content {
      max-width: 800px;
      margin: 0 auto;
      
      .banner-title {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 15px;
      }
      
      .banner-subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
        margin-bottom: 30px;
      }
      
      .start-button {
        padding: 10px 30px;
        font-size: 1.1rem;
        font-weight: 500;
        border-radius: 4px;
        text-transform: uppercase;
      }
    }
  }
  
  .content-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .rankings-preview {
    .top-rank {
      font-weight: bold;
      color: #1976D2;
    }
    
    :deep(.q-markup-table) {
      th {
        background: #f5f5f5;
        font-weight: 600;
        color: #333;
      }
      
      td, th {
        text-align: center;
        padding: 12px 8px;
      }
    }
  }
  
  .feature-card {
    height: 100%;
    border-radius: 4px;
    transition: box-shadow 0.3s ease;
    border: 1px solid #eee;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
  }
  
  .stat-item {
    .text-h3 {
      font-weight: 600;
    }
  }
  
  @media (max-width: $breakpoint-xs-max) {
    .banner-section {
      padding: 60px 15px;
      
      .banner-title {
        font-size: 2rem;
      }
      
      .banner-subtitle {
        font-size: 1rem;
      }
    }
    
    :deep(.q-markup-table) {
      thead {
        display: none;
      }
      
      tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 10px;
      }
      
      td {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border: none;
        
        &::before {
          content: attr(data-label) ": ";
          font-weight: bold;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>